<template>
<a-drawer v-model:visible="visible" width="80%" :footer="false">
    <template #title>
        <div >查看
            <a-button style="float:right" @click="price" type="primary">价格信息</a-button>
        </div>
    </template>
    <ma-form  v-model="form" ref="crudForm" :options="options" :columns="columns">

    </ma-form>
    <a-collapse :default-active-key="[1]">
        <a-collapse-item v-for="(form, index) in form.json"  :key="index+1">
            <template #header>
                <div class="header-container">
                  <span>托盘</span>
                </div>
              </template>
        <a-form :model="form">
            <a-row>
              <a-col :span="3">
                <a-form-item field="length" label="长(cm)" label-col-flex="60px" required>
                  <a-input v-model="form.length" placeholder="" />
                </a-form-item>
              </a-col>
              <a-col :span="3">
                <a-form-item field="width" label="宽(cm)" label-col-flex="60px" required>
                  <a-input v-model="form.width" placeholder="" />
                </a-form-item>
              </a-col>
              <a-col :span="3">
                <a-form-item field="height" label="高(cm)" label-col-flex="60px" required>
                  <a-input v-model="form.height" placeholder="" />
                </a-form-item>
              </a-col>
              <a-col :span="3">
                <a-form-item field="weight" label="单个重(kg)" label-col-flex="80px" required>
                  <a-input v-model="form.weight" placeholder="" />
                </a-form-item>
              </a-col>
              <a-col :span="3">
                <a-form-item field="count" label="数量" label-col-flex="60px" required>
                  <a-input v-model="form.count" placeholder="" />
                </a-form-item>
              </a-col>
              <a-col :span="4">
                <a-form-item field="package_type" label="包装" label-col-flex="60px" required>
                    <a-select v-model="form.package_type" placeholder="" allow-clear>
                        <a-option v-for="item in package_type" :key="item.value" :value="item.value">{{ item.label }}</a-option>
                      </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="3">
                <a-form-item field="info_switch" label="详情" label-col-flex="60px">
                    <a-switch v-model="form.info_switch" />
                </a-form-item>
              </a-col>
            </a-row>
            <div v-if="form.info_switch">
            <p>托盘详情</p>
            <a-divider />
            <a-row :gutter="8">
                <a-col :span="6">
                    <a-form-item field="description" label="描述" label-col-flex="60px"  required>
                        <a-input v-model="form.description" placeholder="" />
                    </a-form-item>
                  </a-col>
                <a-col :span="9">
                    <a-form-item field="" label="" label-col-flex="80px">
                        
                    </a-form-item>
                  </a-col>
                <a-col :span="4">
                    <a-form-item field="hazmat" label="HAZMAT" label-col-flex="80px">
                        <a-switch v-model="form.hazmat" />
                    </a-form-item>
                  </a-col>
            </a-row>
            <a-row :gutter="8" v-if="form.hazmat">
                <a-col :span="5">
                    <a-form-item field="un" label="UN" label-col-flex="60px" required>
                        <a-input v-model="form.un" placeholder="" />
                    </a-form-item>
                </a-col>
                <a-col :span="5">
                    <a-form-item field="pkg_group" label="PKG group" label-col-flex="100px" required>
                        <a-select v-model="form.pkg_group" allow-clear re>
                            <a-option v-for="item in package_type" :key="item.value" :value="item.value">{{ item.label }}</a-option>
                          </a-select>
                    </a-form-item>
                </a-col>
                <a-col :span="5">
                    <a-form-item field="container_type" label="Container Type" label-col-flex="120px" required>
                        <a-select v-model="form.container_type" allow-clear>
                            <a-option v-for="item in package_type" :key="item.value" :value="item.value">{{ item.label }}</a-option>
                          </a-select>
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row :gutter="8">
                <a-col :span="5">
                    <a-form-item field="nmfc" label="NMFC" label-col-flex="60px">
                        <a-input v-model="form.nmfc" placeholder="" />
                    </a-form-item>
                </a-col>
                <a-col :span="5">
                    <a-form-item field="sub_class" label="Subclass" label-col-flex="80px">
                        <a-input v-model="form.sub_class" placeholder="" />
                    </a-form-item>
                </a-col>
                <a-col :span="5" v-if="!form.piece_weight_show">
                    <a-form-item field="total_pieces" label="总箱数" label-col-flex="80px" required="">
                        <a-input v-model="form.total_pieces" placeholder="" />
                    </a-form-item>
                </a-col>
                <a-col :span="5" v-else>
                    <a-form-item field="" label="" label-col-flex="80px">
                        
                    </a-form-item>
                  </a-col>
                <a-col :span="4">
                    <a-form-item field="piece_weight_show" label="单箱重" label-col-flex="80px"  >
                        <a-switch v-model="form.piece_weight_show" />
                    </a-form-item>
                  </a-col>
            </a-row>
            <div v-if="form.piece_weight_show">
                <p>单箱详情
                </p>
                <a-divider />
                <a-row :gutter="8" v-for="item in form.pieces">
                    <a-col :span="5">
                        <a-form-item field="piece_count" label="数量" label-col-flex="60px" required>
                            <a-input v-model="item.piece_count" placeholder="" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="5">
                        <a-form-item field="piece_weight" label="重量" label-col-flex="60px" required>
                            <a-input v-model="item.piece_weight" placeholder="" />
                        </a-form-item>
                    </a-col>
                </a-row>
            </div>
            </div>
          </a-form>
        </a-collapse-item>
    </a-collapse>
    <price-page ref="pricePageRef"></price-page>
</a-drawer>
</template>
<script setup lang="jsx">
import {watch,inject,ref,nextTick,reactive,computed} from 'vue'
import dictHelp from "@/utils/dicthelp.js";
import shipmentThirdFedex from '@/api/document/shipmentThirdFedex'
import { Message } from '@arco-design/web-vue'
import pricePage from './price.vue'
const visible = ref(false)
const crudForm = ref()
const pricePageRef = ref()
const form = ref({})
const package_type = ref([
    {label: "BAG",value: "BAG"},
    {label: "BARREL",value: "BARREL"},
    {label: "BASKET",value: "BASKET"},
    {label: "BOX",value: "BOX"},
    {label: "BUCKET",value: "BUCKET"},
    {label: "BUNDLE",value: "BUNDLE"},
    {label: "CAGE",value: "CAGE"},
    {label: "CARTON",value: "CARTON"},
    {label: "CASE",value: "CASE"},
    {label: "CHEST",value: "CHEST"},
    {label: "CONTAINER",value: "CONTAINER"},
    {label: "CRATE",value: "CRATE"},
    {label: "CYLINDER",value: "CYLINDER"},
    {label: "DRUM",value: "DRUM"},
    {label: "ENVELOPE",value: "ENVELOPE"},
    {label: "PACKAGE",value: "PACKAGE"},
    {label: "PAIL",value: "PAIL"},
    {label: "PALLET",value: "PALLET"},
    {label: "PARCEL",value: "PARCEL"},
    {label: "PIECES",value: "PIECES"},
    {label: "REEL",value: "REEL"},
    {label: "ROLL",value: "ROLL"},
    {label: "SACK",value: "SACK"},
    {label: "SHRINKWRAPPED",value: "SHRINKWRAPPED"},
    {label: "SKID",value: "SKID"},
    {label: "TANK",value: "TANK"},
    {label: "TOTEBIN",value: "TOTEBIN"},
    {label: "TUBE",value: "TUBE"},
    {label: "UNIT",value: "UNIT"},
    {label: "OTHER",value: "OTHER"}
])
const freight_class = ref(
            [
                {label:"CLASS_050",value:"CLASS_050"},
                {label:"CLASS_055",value:"CLASS_055"},
                {label:"CLASS_060",value:"CLASS_060"},
                {label:"CLASS_065",value:"CLASS_065"},
                {label:"CLASS_070",value:"CLASS_070"},
                {label:"CLASS_077_5",value:"CLASS_077_5"},
                {label:"CLASS_085",value:"CLASS_085"},
                {label:"CLASS_092_5",value:"CLASS_092_5"},
                {label:"CLASS_100",value:"CLASS_100"},
                {label:"CLASS_110",value:"CLASS_110"},
                {label:"CLASS_125",value:"CLASS_125"},
                {label:"CLASS_150",value:"CLASS_150"},
                {label:"CLASS_175",value:"CLASS_175"},
                {label:"CLASS_200",value:"CLASS_200"},
                {label:"CLASS_250",value:"CLASS_250"},
                {label:"CLASS_300",value:"CLASS_300"},
                {label:"CLASS_400",value:"CLASS_400"},
            ])
const onShow = (data) => {
    visible.value = true
    form.value = data

}
const options = ref({
    showButtons:false,
  })

const columns=ref([
    {
        formType: 'grid-tailwind',
        colNumber: 2,
        cols: [
          {
            formList: [
              {
                formType: 'card',
                title: '基本信息',
                forceShow:true,
                formList: [
                    {
                        title: "站点",
                        dataIndex: "depot_id",
                        formType: "radio",
                        dict:dictHelp.depotPrice,
                        rules: {
                            required: true,
                            message: "请选择站点"
                        }
                    },
                    {
                        title: "时间",
                        dataIndex: "time",
                        formType: "date",
                        rules: {
                            required: true,
                            message: "请选择时间"
                        }
                    },
                    {
                        title: "备注",
                        dataIndex: "remark",
                        formType: "input",
                    },
                    {
                        formType: "hide",
                    },
                    {
                        title: "附加服务",
                        dataIndex: "additional_service",
                        formType: "select",
                        multiple: true,
                        dict:{
                            data:[
                                {label:"货运直达",value:"FREIGHT_DIRECT"},
                                {label:"货运保证",value:"FREIGHT_GUARANTEE"},
                                {label:"联邦快递内部投递",value:"INSIDE_DELIVERY"},
                                {label:"联邦内部取件",value:"INSIDE_PICKUP"},
                                {label:"升降尾板交付",value:"LIFTGATE_DELIVERY"},
                                {label:"升降尾板取货",value:"LIFTGATE_PICKUP"},
                                {label:"有限访问交付",value:"LIMITED_ACCESS_DELIVERY"},
                                {label:"有限访问取件",value:"LIMITED_ACCESS_PICKUP"},
                                {label:"超长",value:"OVER_LENGTH"},
                                {label:"交货前致电",value:"CALL_BEFORE_DELIVERY"},
                                {label:"客户要求配送时间段",value:"CUSTOM_DELIVERY_WINDOW"},
                                {label:"极限长度",value:"EXTREME_LENGTH"},
                            ]
                        },
                    },
                ]
              },
            ]
          },
          {
            formList: [
              {
                formType: 'card',
                title: '地址信息',
                forceShow:true,
                formList: [
                    {
                        title: "州/省",
                        dataIndex: "state",
                        formType: "input",
                    },
                    {
                        title: "城市",
                        dataIndex: "city",
                        formType: "input",
                    },
                    {
                        title: "街道",
                        dataIndex: "street",
                        formType: "input",
                    },
                    {
                        title: "邮编",
                        dataIndex: "postcode",
                        formType: "input",
                        rules: {
                        required: true,
                        message: "请输入邮编"
                        }
                    },
                ]
              },
            ]
          },
        ]
      },
])
const price = () =>{
    pricePageRef.value.onShow(form.value.id)
}
defineExpose({ onShow })
</script>